import React from "react";
import {Card, Avatar, Space, Typography} from "antd";
import {UserOutlined, RobotOutlined} from "@ant-design/icons";
import "./AnalysisItem.css";

const {Text} = Typography;

export function MessageItem({message, isUser}) {
  return (
    <Space
      align="start"
      style={{
        width: "100%",
        justifyContent: isUser ? "flex-end" : "flex-start",
        marginBottom: 12,
      }}
    >
      {!isUser && (
        <Avatar
          icon={<RobotOutlined/>}
          style={{backgroundColor: "#1890ff"}}
        />
      )}
      <Card
        size="small"
        style={{
          maxWidth: 400,
          background: isUser ? "#e6f7ff" : "#fff",
          borderRadius: 8,
          boxShadow: "0 1px 4px rgba(0,0,0,0.04)",
        }}
      >
        <Text>{message.text}</Text>
        <div style={{fontSize: 12, color: "#999", marginTop: 4, textAlign: isUser ? "right" : "left"}}>
          {new Date(message.timestamp).toLocaleTimeString()}
        </div>
      </Card>
      {isUser && (
        <Avatar
          icon={<UserOutlined/>}
          style={{backgroundColor: "#87d068"}}
        />
      )}
    </Space>
  );
}